<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-divider type="vertical" class="antd-modal-divider" />
        <h4 class="hClass">基本信息</h4>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="设备名称" v-bind="validateInfos.devName">
            <a-input v-model:value="formData.devName" :disabled="disabledA" @click="onSelectDeviceId"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="故障时间" v-bind="validateInfos.faultDate">
            <a-date-picker v-model:value="formData.faultDate" value-format="YYYY-MM-DD" style="width: 100%"
              :disabled="disabledA" />
          </a-form-item>
        </a-col>

      </a-row>
      <a-col :span="8">
        <a-form-item label="故障现象" v-bind="validateInfos.faultDescription">
          <a-input v-model:value="formData.faultDescription"
            style="width: 840px; border-radius: 4px 4px 4px 4px; opacity: 1; border: 0.5px solid #DDDDDD ;"
            :disabled="disabledA"></a-input>
        </a-form-item>
      </a-col>
      <a-row v-show="show">
        <a-divider type="vertical" class="antd-modal-divider" />
        <h4 class="hClass">保养/维修</h4>
      </a-row>
      <a-row v-show="show">
        <a-col :span="8">
          <a-form-item label="保养/维修时间" v-bind="validateInfos.maintainDate">
            <a-date-picker v-model:value="formData.maintainDate" value-format="YYYY-MM-DD" style="width: 100%"
              :disabled="disabledB" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="处理方式" v-bind="validateInfos.maintainMethod">
            <a-input v-model:value="formData.maintainMethod" :disabled="disabledB"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="维修工时/h" v-bind="validateInfos.maintainHours">
            <a-input-number v-model:value="formData.maintainHours" style="width: 100%" :disabled="disabledB" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="维保人员/单位" v-bind="validateInfos.maintainPersonal">
            <j-dict-select-tag v-model:value="formData.maintainPersonal" dictCode="" :disabled="disabledB" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-col :span="8"  v-show="show">
        <a-form-item label="更换配件情况" v-bind="validateInfos.replaceModule">
          <a-input v-model:value="formData.replaceModule"
            style="width: 840px; border-radius: 4px 4px 4px 4px; opacity: 1; border: 0.5px solid #DDDDDD ;"
            :disabled="disabledB"></a-input>
        </a-form-item>
      </a-col>
      <a-row  v-show="show">
        <a-col :span="8">
          <a-form-item label="内容及结果" v-bind="validateInfos.maintainDetails">
            <a-textarea v-model:value="formData.maintainDetails" rows="4" :disabled="disabledB" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="保养/维修证明" v-bind="validateInfos.maintainAtta">
            <j-upload v-model:value="formData.maintainAtta" :disabled="disabledB"></j-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
  <DeviceSelectModal rowKey="id" @register="registerSelDeviceModal" @getSelectResult="onSelectChemicalOk"
    style="height: 40px; overflow: auto" />
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../LabMaintain.api';
import { Form } from 'ant-design-vue';
import { useModal } from '/@/components/Modal/index';
import DeviceSelectModal from "../components/DeviceSelectModal.vue";

const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: () => { } },
  formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  devId: '',
  devName: '',
  faultDate: '',
  faultDescription: '',
  maintainDate: '',
  maintainMethod: '',
  maintainHours: undefined,
  maintainPersonal: '',
  replaceModule: '',
  maintainDetails: '',
  maintainAtta: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });

// 表单禁用
const disabled = computed(() => {
  if (props.formBpm === true) {
    if (props.formData.disabled === false) {
      return false;
    } else {
      return true;
    }
  }
  return props.formDisabled;
});


const [registerSelDeviceModal, selDevModal] = useModal();
const show = ref(false);
const disabledA=ref(false);
const disabledB=ref(false);
// 选择设备
function onSelectDeviceId() {
  selDevModal.openModal();
}

async function onSelectChemicalOk(selectRows) {
  //选中的设备
  formData.devName = selectRows[0].devName;
  formData.devId = selectRows[0].id;
}
/**
 * 新增
 */
function add() {
  show.value = false;
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, {});
  });
  // edit({});
}

/**
 * 编辑
 */
function edit(record) {
  show.value = true;
  disabledA.value=true;
  nextTick(() => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
}

onMounted(()=>{
  if (props.formBpm === true) {
    if (props.formData.disabled !== false) {
      disabledA.value= true;
      disabledB.value= true;
    }
  }
})

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (model.id) {
    isUpdate.value = true;
  }
  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }
  await saveOrUpdate(model, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}


defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}

//标题:基本信息 的格式
.antd-modal-divider {
  width: 2px;
  height: 16px;
  background: #009688;
  border-radius: 0px 0px 0px 0px;
  opacity: 1;
}

.hClass {
  width: 80px;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 550;
  color: #009688;
  line-height: 14px;
}

//   .ant-form-item-label {
//   width: 60px;
//   height: 20px;
//   font-size: 14px;
//   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
//   font-weight: 400;
//   color: #727272;
//   line-height: 20px;
//   }

//   .ant-picker {
//   width: 200px !important;
//   height: 32px;
//   border-radius: 4px 4px 4px 4px;
//   opacity: 1;
//   border: 1px solid #DDDDDD;
// }

//文本输入框格式
:deep(.ant-form-item-control-input) {
  width: 200px !important;
}

//文本框和名字百分比占比
:deep(.ant-col-sm-5) {
  display: block;
  flex: 0 0 40.83333333%;
  max-width: 40.83333333%;
}
</style>
